<template>
  <div class="singel music-cpns-common" v-if="getMusicDetail.id" ref="scroll">
    <div class="singel-main">
      <div class="singel-top">
        <div class="bck-img">
          <img
            :src="$filters.formatImgSize(getMusicDetail.al.picUrl, 400)"
            alt="404"
            style="
              width: 100%;
              filter: blur(80px);
              max-height: 400px;
              border-radius: 50%;
            "
          />
        </div>
        <div class="singel-play-img">
          <div class="play-bar" ref="playBar">
            <img src="~assets/img/now-music/player_bar.png" alt="404" />
          </div>
          <div class="play-disc" ref="playDisc">
            <img src="~assets/img/now-music/disc.png" alt="404" />
            <div class="disc-img">
              <img
                :src="$filters.formatImgSize(getMusicDetail.al.picUrl, 200)"
                alt="404"
              />
            </div>
          </div>
          <div class="btn">
            <el-button size="mini" @click="addCollect">
              <el-icon v-if="!likeFlag"><star /></el-icon>
              <el-icon v-else><star-filled /></el-icon>
              喜欢</el-button
            >
            <!-- <el-button size="mini" :icon="Share">分享</el-button> -->
            <el-button size="mini" :icon="Download" @click="startDown"
              >vip下载</el-button
            >
          </div>
        </div>
        <div class="singer-text">
          <div class="singel-title">
            <span style="font-size: 25px; color: #000; margin-right: 10px">{{
              getMusicDetail.name || getMusicDetail.al.name
            }}</span>
            <span
              style="
                border: 1px solid red;
                font-size: 12px;
                color: red;
                padding: 1px 4px;
              "
              >标准音质</span
            >
            <div style="margin: 19px 0; font-size: 13px">
              专辑:
              <span style="color: #2559a4">{{
                getMusicDetail.alia[0] || getMusicDetail.al.name
              }}</span>
              歌手:
              <span style="color: #2559a4">{{
                getMusicDetail.ar[0].name
              }}</span>
            </div>
          </div>
          <div class="lyric">
            <!--歌词-->
            <div
              style="
                width: 350px;
                height: 350px;
                overflow: auto;
                margin-top: 25px;
                transition: all 0.5s ease-in;
              "
              ref="lyricScroll"
            >
              <ul ref="lyric">
                <li
                  v-for="(item, i) in lrcObject"
                  :key="i"
                  :class="lyricIndex === i ? 'active-color' : ''"
                  :ref="lyricIndex === i ? 'lyricRef' : ''"
                >
                  {{ item.c }}
                </li>
              </ul>
            </div>
          </div>
          <div class="singel-back">
            <el-button
              @click="comBack"
              :icon="CopyDocument"
              size="small"
            ></el-button>
          </div>
        </div>
      </div>
      <div class="singel-btm">
        <div class="singer-left">
          <TitleHeader
            name="听友评论"
            :show="false"
            style="margin-bottom: 20px"
          ></TitleHeader>
          <!-- 此处的写法是为了用计算属性实现监听达到响应式效果 -->
          <div v-show="false">
            <div>{{ isPlay }}</div>
            <div>{{ duration }}</div>
            <div>{{ songId }}</div>
          </div>
          <sing-comment
            :songId="songId"
            @handleTop="handleTop"
            commentType="music"
            ref="commentRef"
          ></sing-comment>
        </div>
        <div class="singer-right">
          <TitleHeader
            name="相似歌曲"
            :show="false"
            style="margin-top: 110px"
          ></TitleHeader>
          <music-simi
            :musicid="songId"
            ref="simiRef"
            @handleTop="handleTop"
          ></music-simi>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { InitDoing } from '../hook/init'
import TitleHeader from '@/base-ui/header'
import SingComment from '@/base-ui/comment'
import MusicSimi from '../cpns/music-simi.vue'
import {
  Star,
  IceCreamSquare,
  Share,
  Download,
  CopyDocument
} from '@element-plus/icons-vue'

export default defineComponent({
  components: { TitleHeader, SingComment, MusicSimi },
  setup() {
    const {
      gettersMusic,
      scroll,
      playBar,
      playDisc,
      lyricScroll,
      lyric,
      lyricRef,
      lrcObject,
      lyricIndex,
      comBack,
      lyrics,
      isPlay,
      duration,
      songId,
      handleTop,
      commentRef,
      simiRef,
      startDown,
      addCollect,
      likeFlag
    } = InitDoing()
    return {
      ...gettersMusic,
      Star,
      IceCreamSquare,
      Share,
      Download,
      CopyDocument,
      scroll,
      playBar,
      playDisc,
      lyricScroll,
      lyric,
      lyricRef,
      lrcObject,
      lyricIndex,
      comBack,
      lyrics,
      isPlay,
      duration,
      songId,
      handleTop,
      commentRef,
      simiRef,
      startDown,
      addCollect,
      likeFlag
    }
  }
})
</script>

<style scoped>
.active-color {
  background: linear-gradient(to right, hsl(98 100% 62%), hsl(204 100% 59%));
  /* background-image: -webkit-linear-gradient(0deg, yellow, red 10%, green); */
  background-clip: text;
  color: transparent;
}
</style>
